<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div>欢迎，</div>
      <div>{{ name }}</div>
      <div>登录 DLB大数据分析平台</div>
    </div>
    <div style="margin-bottom:20px;">【以下是接入SDK后的数据图表展示：】</div>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="grid-content">
          <div class="card category">
            <div class="desc">
              <img src="../../assets/img/movie.png" class="icon">
              <p class="card-title">影视盒子 CIBN Demo</p>
              <p class="card-desc">优化用户观影体验和改善用户留存，不断提升用户付费和充值转化。</p>
            </div>
            <div class="buttons">
              <el-button type="primary" class="card-btn" @click.native.prevent="handleUse('cibn')">点击体验</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="grid-content">
          <div class="card category">
            <div class="desc">
              <img src="../../assets/img/education.png" class="icon">
              <p class="card-title">在线教育 513 Demo</p>
              <p class="card-desc">包含核心业务流程，浏览-选课-付费-预约-上课，实时关注关键节点转化率。</p>
            </div>
            <div class="buttons">
              <el-button type="primary" class="card-btn" @click.native.prevent="handleUse('education')">点击体验</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="grid-content">
          <div class="card category">
            <div class="desc">
              <img src="../../assets/img/finance.png" class="icon">
              <p class="card-title">互联网金融 Demo</p>
              <p class="card-desc">对用户行为轨迹全程追踪，从渠道获客、活跃和留存，到购买的多维度分析。</p>
            </div>
            <div class="buttons">
              <el-button type="primary" class="card-btn" @click.native.prevent="handleUse('finance')">点击体验</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="grid-content">
          <div class="card more">
            <img src="../../assets/img/more.png" class="icon">
            <p class="card-title">更多行业案例<br>敬请期待</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
export default {
  name: 'DashBoard',
  data() {
    return {
      name: ''
    }
  },
  mounted() {
    this.name = getToken('name')
  },
  methods: {
    handleUse(type) {
      if (type === 'cibn') {
        this.$router.push({ path: '/demo/cibn' })
      } else {
        Message({
          message: '暂未开放！',
          type: 'error',
          duration: 2 * 1000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 30px;
  background: #f8fbfd;
  .dashboard-text {
    color:#333;
    font-size: 26px;
    line-height: 46px;
    margin-bottom: 50px;
  }
  .grid-content{
    margin: 0px 30px 50px 0px;
    .card{
      text-align: center;
      vertical-align: top;
      display: inline-block;
      padding: 0 15px;
      position: relative;
      width: 300px;
      height: 270px;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 2px 10px 0 rgba(155,165,163,.15);
      .desc{
        text-align: center;
        .icon{
          height: 46px;
          margin-top: 23px;
        }
        .card-title{
          margin-top: 19px;
          color: #2e4446;
          font-size: 20px;
          border-top: 1px solid #e7e7e7;
          padding-top: 14px;
        }
        .card-desc{
          font-size: 14px;
          text-align: justify;
          color: #828f90;
          line-height: 1.785;
          font-weight: 300;
        }
      }
      .buttons{
        padding: 6px 0;
        .card-btn{
          padding: 6px 15px;
          margin: 10px 5px;
        }
      }
      &.category{
        &:hover{
          box-shadow: 0 25px 60px -20px rgba(155,165,163,.45);
          cursor: pointer;
          transform: translateY(-8px);
          transition: all .25s ease-in-out;
        }
      }
      &.more{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
          height: 46px;
          margin-top: 23px;
        }
        .card-title{
          padding: 12px 60px;
          margin-top: 19px;
          color: #2e4446;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
